<template>
  <div>
    <a-modal
      class="multi-instance-modal"
      title="多实例配置"
      :visible="dialogVisible"
      :closable="false"
      :mask-closable="false"
      :keyboard="false"
      width="500px"
      cancel-text="清空"
      @cancel="reset"
      @ok="save"
    >
      <a-alert style="margin-bottom: 24px" >
        <template slot="message">
          按照BPMN2.0规范的要求，用于为每个实例创建执行的父执行，会提供下列变量:<br>
          nrOfInstances：实例总数。<br>
          nrOfActiveInstances：当前活动的（即未完成的），实例数量。对于顺序多实例，这个值总为1。<br>
          nrOfCompletedInstances：已完成的实例数量。<br>
          loopCounter：给定实例在for-each循环中的index。<br>
        </template>
      </a-alert>
      <a-form-model
        :model="formData"
        ref="xForm"
        :label-col="{ span: 4 }"
        :wrapper-col="{ offset: 1, span: 16 }"
      >
        <a-form-item prop="collection" >
          <template slot="label">
            <a-tooltip>
              <template slot="title">
                属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合，<br />不论是因为本身配置的就是静态字符串值，还是表达式计算结果为字符串，<br />这个字符串都会被当做变量名，并从流程变量中用于获取实际的集合。
              </template>
              <span>集合</span>
              <a-icon type="question-circle" />
            </a-tooltip>
          </template>
          <a-input v-model="formData.collection" />
        </a-form-item>
        <a-form-item prop="elementVariable">
          <template slot="label">
            <a-tooltip>
              <template slot="title">
                每创建一个用户任务前，先以该元素变量为label，集合中的一项为value，<br />创建（局部）流程变量，该局部流程变量被用于指派用户任务。<br />一般来说，该字符串应与指定人员变量相同。
              </template>
              <span>元素变量</span>
              <a-icon type="question-circle" />
            </a-tooltip>
          </template>
          <a-input v-model="formData.elementVariable" />
        </a-form-item>
        <a-form-item
          label="执行方式"
          prop="isSequential"
        >
          <a-radio-group v-model="formData.isSequential">
            <a-radio :value="true">串行</a-radio>
            <a-radio :value="false">并行</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item prop="completionCondition"
        >
          <template slot="label">
            <a-tooltip>
              <template slot="title">
                多实例活动在所有实例都完成时结束，然而也可以指定一个表达式，在每个实例<br />结束时进行计算。当表达式计算为true时，将销毁所有剩余的实例，并结束多实例<br />活动，继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 }，<br />表示当任务完成60%时，该节点就算完成
              </template>
              <span>完成条件</span>
              <a-icon type="question-circle" />
            </a-tooltip>
          </template>
          <a-input v-model="formData.completionCondition" />
        </a-form-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import mixinPanel from '../../../common/mixinPanel';
import { formatJsonKeyValue } from '../../../common/parseElement';
export default {
  mixins: [mixinPanel],
  data() {
    return {
      dialogVisible: true,
      formData: {},
    };
  },
  computed: {
    formConfig() {
      const _this = this;
      return {
        inline: false,
        item: [
          {
            xType: 'input',
            name: 'collection',
            label: '集合',
            tooltip: '属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合，<br />不论是因为本身配置的就是静态字符串值，还是表达式计算结果为字符串，<br />这个字符串都会被当做变量名，并从流程变量中用于获取实际的集合。',
          },
          {
            xType: 'input',
            name: 'elementVariable',
            label: '元素变量',
            tooltip: '每创建一个用户任务前，先以该元素变量为label，集合中的一项为value，<br />创建（局部）流程变量，该局部流程变量被用于指派用户任务。<br />一般来说，该字符串应与指定人员变量相同。',
          },
          {
            xType: 'radio',
            name: 'isSequential',
            label: '执行方式',
            dic: [{ label: '串行', value: true }, { label: '并行', value: false }],
          },
          {
            xType: 'input',
            name: 'completionCondition',
            label: '完成条件',
            // eslint-disable-next-line no-template-curly-in-string
            tooltip: '多实例活动在所有实例都完成时结束，然而也可以指定一个表达式，在每个实例<br />结束时进行计算。当表达式计算为true时，将销毁所有剩余的实例，并结束多实例<br />活动，继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 }，<br />表示当任务完成60%时，该节点就算完成',
          },
        ],
        operate: [
          { text: '确定', show: true, click: _this.save },
          { text: '清空', show: true, click: () => { _this.formData = {}; } },
        ],
      };
    },
  },
  mounted() {
    const cache = JSON.parse(JSON.stringify(this.element.businessObject.loopCharacteristics ?? {}));
    cache.completionCondition = cache.completionCondition?.body;
    this.formData = formatJsonKeyValue(cache);
  },
  methods: {
    reset() {
      this.formData = {};
    },
    updateElement() {
      if (this.formData.isSequential !== null && this.formData.isSequential !== undefined) {
        let loopCharacteristics = this.element.businessObject.get('loopCharacteristics');
        if (!loopCharacteristics) {
          loopCharacteristics = this.modeler.get('moddle').create('bpmn:MultiInstanceLoopCharacteristics');
        }
        loopCharacteristics['isSequential'] = this.formData.isSequential;
        loopCharacteristics['collection'] = this.formData.collection;
        loopCharacteristics['elementVariable'] = this.formData.elementVariable;
        if (this.formData.completionCondition) {
          const completionCondition = this.modeler.get('moddle').create('bpmn:Expression', { body: this.formData.completionCondition });
          loopCharacteristics['completionCondition'] = completionCondition;
        }
        this.updateProperties({ loopCharacteristics: loopCharacteristics });
      } else {
        delete this.element.businessObject.loopCharacteristics;
      }
    },
    save() {
      this.updateElement();
      this.$emit('close');
      // this.dialogVisible = false;
    },
  },
};
</script>

<style>
.muti-instance .el-form-item {
  margin-bottom: 22px;
}
</style>
